<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>

<!--
    vue 组件化开发

     开发完成轮播图效果
        1. 编写页面结构   html  div>div*6
        2. 编写css样式   css
        3. 编写javascript代码
       a.html     copy html  css  js    -> b.html
                  css  代码  base.css      lb.css
                  js         base.js       lb.js      -> 引入b.html  link  script
                                                      ->  c.html  d.html   link  script
     组件:  将完成特定需求的 html  css js代码封装在一起就形成了一个组件  .vue   html  css  js ->  lb.vue

     分类:
        编写形式:
            1.非单文件组件    在一个html文件中定义了多个组件
            2.单文件组件      以.vue文件的形式定义组件
        作用域:
           1.全局组件       将组件注册在Vue上 那么该组件是一个全局组件  后续凡是通过Vue构造函数创建的实例  均可直接使用该组件
           2.局部组件       将组件注册在vue实例上,那么该组件是局部组件  局部组件只能在注册的父组件中进行使用

-->
<div id="app">

  <!--使用组件标签完成组件的使用-->
    <student></student>
    <hr>
    <teacher></teacher>
</div>


<script>
    /*
    *   组件使用的步骤:
    *    1. 定义组件
    *    2. 注册组件
    *    3. 使用组件

    * */

    const  teacher = {
        template: `
          <div>
          <h3>{{ title }}</h3>
          <p>教师姓名:{{ teacher.name }}</p>
          <p>教师年龄:{{ teacher.age }}</p>
          <p>教师薪资:{{ teacher.salary }}</p>
          </div>
        `,
        data(){
            return {
                title:'教师信息展示',
                teacher:{
                    name:'jack',
                    age: 30,
                    salary: 5000
                }
            }
        }
    }
    const student = {
        template:`
                <div>
                    <h3>{{title}}</h3>
                    <p>学生姓名:{{student.name}}</p>
                    <p>学生年龄:{{student.age}}</p>
                    <p>学生性别:{{student.sex}}</p>
                    <hr>
                    <teacher></teacher>
               </div>
        `,
        data(){
            return {
                title:"学生信息展示",
                student:{
                    name:'tom',
                    age:20,
                    sex:"男"
                }
            }
        },
        components:{
            teacher
        }
    }



    let vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{  // 组件的注册
            // student:student
            student ,  // <student></student>
            teacher
        }
      })
</script>

</body>
</html>